//main-container全局样式
.app-main {
  /*50 = navbar  */
  height: calc(100vh - 50px);
  flex: 1;
  overflow: auto;
  padding: 10px;

  @media screen and (max-width: 768px) {
    padding: 5px;
    height: calc(100vh - 90px); // 适应移动端导航栏高度
  }
}

.app-container {
  padding: 10px;
  overflow: auto;

  @media screen and (max-width: 768px) {
    padding: 5px;
  }
}

.app-page {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
}

// 移动端表格样式
@media screen and (max-width: 768px) {
  .el-table {
    width: 100%;
    
    /deep/ .el-table__header-wrapper,
    /deep/ .el-table__body-wrapper {
      overflow-x: auto;
    }
    
    /deep/ .el-table__body,
    /deep/ .el-table__header {
      min-width: 100%;
    }
    
    /deep/ .cell {
      padding: 5px !important;
      font-size: 12px;
    }
  }
  
  // 移动端表单样式
  .el-form {
    /deep/ .el-form-item {
      margin-bottom: 10px;
      
      .el-form-item__label {
        padding: 0 5px;
        font-size: 13px;
      }
      
      .el-form-item__content {
        line-height: 32px;
      }
    }
  }
  
  // 移动端对话框样式
  .el-dialog {
    width: 90% !important;
    margin-top: 10vh !important;
    
    /deep/ .el-dialog__body {
      padding: 10px;
    }
  }
  
  // 移动端卡片样式
  .el-card {
    /deep/ .el-card__body {
      padding: 10px;
    }
  }
  
  // 移动端按钮样式
  .el-button {
    padding: 8px 15px;
    font-size: 13px;
  }
  
  // 移动端输入框样式
  .el-input {
    font-size: 13px;
    
    /deep/ .el-input__inner {
      height: 32px;
      line-height: 32px;
    }
  }
  
  // 移动端选择器样式
  .el-select {
    width: 100%;
  }
  
  // 移动端日期选择器样式
  .el-date-editor.el-input {
    width: 100%;
  }
  
  // 移动端标签页样式
  .el-tabs {
    /deep/ .el-tabs__item {
      padding: 0 10px;
      font-size: 13px;
      height: 35px;
      line-height: 35px;
    }
  }
}
